<template>
  <div>
    <my-header
      ><el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>废品订单</el-breadcrumb-item></my-header
    >
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7"
          ><!-- 输入框 -->
          <el-input
            placeholder="请输入废品名称"
            clearable
            v-model="inputValue"
            @clear="getWasteOrder"
          >
            <template #append>
              <el-button icon="Search" @click="onSearchList" />
            </template> </el-input
        ></el-col>
      </el-row>

      <!-- 商品列表区域 -->
      <el-table :data="WasteOrderList" style="width: 100%" border stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="wasteid" label="废品名称"></el-table-column>
        <el-table-column prop="addres" label="地址"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
        <el-table-column prop="finshTime" label="完成时间"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === '1'">已回收</el-tag>
            <el-tag type="warning" v-else>待上门</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="回收">
          <template #default="scope">
            <el-tag
              class="mx-1"
              effect="dark"
              :style="{ cursor: scope.row.status === '1' ? 'not-allowed' : 'pointer' }"
              @click="lookDetail(scope.row)"
            >
              提交
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        :page-sizes="[1, 2, 5, 10]"
        small="small"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="WasteOrderList.length"
      />

      <!-- 查看废品订单的对话框 -->
      <el-dialog
        v-model="lookDialogVisible"
        title="查看废品订单"
        width="30%"
        @close="lookDialogClosed"
      >
        <!-- 内容主体区域 -->
        <el-form ref="lookFormRef" :model="lookForm" status-icon label-width="70px">
          <el-form-item label="废品名称">
            <el-input v-model="lookForm.wasteid" disabled />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="lookForm.addres" disabled />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="lookForm.phone" disabled />
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="lookForm.price" />
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmLookDialog">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 已经回收的对话框 -->
      <el-dialog v-model="confirmDialog" title="查看废品订单" width="30%" @close="lookDialogClosed">
        <span>已回收啦</span>
        <!-- 底部区域 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmEventDialog">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { wasteOrder, updateWasteOrder } from '../../api/order.js'
export default {
  data() {
    return {
      inputValue: '',
      WasteOrderList: [],
      lookDialogVisible: false,
      lookForm: [],
      confirmDialog: false
    }
  },
  created() {
    this.getWasteOrder()
  },
  methods: {
    onSearchList() {
      this.WasteOrderList = this.WasteOrderList.filter((item) =>
        item.wasteid.includes(this.inputValue)
      )
    },
    // 获取废品订单列表
    async getWasteOrder() {
      const { data: res } = await wasteOrder()
      if (res.code !== 1) {
        return this.$message.error('获取废品订单列表失败')
      }
      this.WasteOrderList = res.data
    },
    // 编辑废品订单状态
    async confirmLookDialog() {
      const params = { id: this.lookForm.id, price: Number(this.lookForm.price) }
      const { data: res } = await updateWasteOrder(params)
      if (res.code !== 1) {
        return this.$message.error('提交订单失败！')
      } else {
        this.lookDialogVisible = false
        this.getWasteOrder()
        return this.$message.success('提交订单成功！')
      }
    },
    // 查看订单详情
    lookDetail(item) {
      if (item.status === '0') {
        this.lookForm = item
        this.lookDialogVisible = true
      } else {
        this.confirmDialog = true
      }
    },
    // 已经发货
    confirmEventDialog() {
      this.confirmDialog = false
    }
  }
}
</script>

<style lang="less" scoped></style>
